<template>
  <div class="employee-manage">
    <h2 class="page-title">👔 员工管理</h2>
    
    <el-card shadow="never" class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="searchForm.name" placeholder="员工姓名" clearable />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never">
      <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column prop="employeeId" label="ID" width="80" />
        <el-table-column prop="employeeName" label="员工姓名" min-width="120" />
        <el-table-column prop="phone" label="电话" width="140" />
        <el-table-column prop="position" label="职位" min-width="120" />
        <el-table-column prop="department" label="部门" min-width="120" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.employeeStatus === 'active' ? 'success' : 'info'">
              {{ row.employeeStatus === 'active' ? '在职' : '离职' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="入职时间" width="120">
          <template #default="{ row }">
            {{ formatDate(row.hireTime) }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="pagination.total > 0"
        class="pagination"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const tableData = ref([])

const searchForm = reactive({
  name: ''
})

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

const loadData = async (page = 1) => {
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: page.toString(),
      pageSize: pagination.pageSize.toString()
    })
    if (searchForm.name) params.append('name', searchForm.name)
    
    const res = await fetch(`http://localhost:7001/api/employees/all?${params.toString()}`)
    const json = await res.json()
    console.log('员工列表响应:', json)
    if (json.code === 200) {
      console.log('员工数据:', json.data)
      tableData.value = json.data || []
      pagination.total = json.pagination?.total || 0
      pagination.current = page
    } else {
      console.error('员工列表错误:', json)
    }
  } catch (e) {
    console.error('获取员工列表失败:', e)
    ElMessage.error('获取员工列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => loadData(1)
const handleReset = () => {
  searchForm.name = ''
  loadData(1)
}
const handlePageChange = (page) => loadData(page)

const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleDateString('zh-CN')
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.employee-manage {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.search-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>

